<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page isELIgnored="false" %>
<!DOCTYPE html >
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>个人中心</title>
    <link rel="stylesheet" href="css/common.css"/>
    <link rel="stylesheet" href="css/one.css"/>
    <link rel="stylesheet" href="css/km_homepage.css"/>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery-3.2.0.min.js"></script>
    <script src="js/distpicker.data.js"></script>
    <script src="js/distpicker.js"></script>
    <script src="js/main.js"></script>
    <%--下面四条是国家下拉列表--%>
    <link rel="stylesheet" href="css/select_gj.css">
    <script src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/select_gj.min.js"></script>
    <script src="js/select2_1.js"></script>
    <script type="text/javascript" src="js/select.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#km_m_nav li").click(function () {
                $("#km_m_nav li").removeClass("current");
                $(this).addClass("current");
                $("#km_m_content .km_m_content_con").hide();
                var name = $(this).attr("id");
                $("#" + name + "_con").show();
            })
        })
    </script>
    <!-- 上传歌曲格式验证 -->
    <script type="text/javascript">
        $(function () {
            $("#km_btn1").click(function () {
                var str = $("#ipt").val();
                var arr = str.split('\\');
                var my = arr[arr.length - 1];

                if ((my.indexOf(".mp3")) == -1) {
                    alert("上传格式需为mp3格式");

                } else {

                    $(this).prop("type", "submit");
                    alert("正在上传...");
                }
            })
        });
    </script>
</head>
<body>
<div class="container" style="width: 90%">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <!--下面整体  -->
            <div class="km_m_main" style="height: 800px">
                <div class="km_m_box" style="padding-bottom: 20px;">
                    <div class="km_m_contents" style="min-height: 700px;margin-top: 20px">
                        <div class="km_m_left">
                            <div class="head_img"
                                 style="background-image:url('${head_img }');background-size: cover;width: 160px;height: 160px;border-color: #2e6da4"></div>
                        </div>
                        <div class="km_m_right" style="min-height: 700px;">
                            <div class="km_m_title">
                                <h1 style="color: #2e6da4">歌单信息</h1>
                            </div>
                            <div id="km_m_nav">
                                <ul>
                                    <!-- <li class="current" id="km_m_portrait">上传头像 -->
                                    <li class="current" id="km_m_information">添加歌单
                                    <li id="km_m_password">
                                        包含歌曲 <%--href="/music?method=checkMusciById&currentPage=1&sid=${singer.id}">--%>
                                    <li id="km_m_updown">上传歌曲
                                </ul>
                            </div>
                            <div id="km_m_content">
                                <div class="km_m_content_con" id="km_m_information_con">
                                    <form action="UploadImg" method="post" enctype="multipart/form-data">
                                        <div class="form_div">上传歌单封面：<input id="km_head" type="file" name="file" style="font-size:10px;display:inline">
                                            <button id="km_head_submit" style=" width:70px;height:28px;border: none;background: #2e6da4;cursor: pointer;" type="submit" value="">上传</button>
                                        </div>
                                    </form>
                                    <form action="songList" method="get" enctype="multipart/form-data">
                                        <div class="form_div">
                                            <label >歌&nbsp;单&nbsp;名：</label>
                                            <input type="text" name="username" id="username" maxlength="30"></div>
                                        <div class="form_div" style="height:60px; line-height: 50px;">
                                            <label >简&nbsp;&nbsp;&nbsp;&nbsp;介：</label><br>
                                            <textarea name="introduce" class="t_area" id="signature" style="color:black;width: 500px;min-height:150px "></textarea>
                                        </div><br>

                                        <div class="form_div" style="margin-top: 130px">
                                            <label style="width: 150px">歌单种类:</label>
                                            <select name="style" class="form-control" style="width: 200px">
                                                <option value="">查询所有</option>
                                                <option value="华语">华语</option>
                                                <option value="轻音乐">轻音乐</option>
                                                <option value="粤语">粤语</option>
                                                <option value="日韩">日韩</option>
                                                <option value="欧美">欧美</option>
                                                <option value="欧美-轻音乐">欧美-轻音乐</option>
                                                <option value="日韩-轻音乐">日韩-轻音乐</option>
                                                <option value="BGM">BGM</option>
                                                <option value="乐器">乐器</option>

                                         </select>
                                        </div>

                                        <div class="form-group" style="text-align: center ;margin-top: 100px">

                                            <input class="btn btn-primary" type="submit" value="提交"   onclick="window.location.href='/songList?method=showAll&currentPage=1';"/>
                                            <input class="btn btn-default" type="reset" value="重置" onclick="window.location.href='#';"/>
                                            <input class="btn btn-default" type="button" value="返回" onclick="window.location.href='/songList?method=showAll&currentPage=1';"/>
                                        </div>
                                    </form>
                                </div>
                                <div style="display: none;" class="km_m_content_con" id="km_m_password_con">
                                    <table border="1" class="table table-bordered table-hover">
                                        <tr class="success">
                                            <th>编号</th>
                                            <th>歌名</th>
                                            <th>歌手</th>
                                            <th>操作</th>
                                        </tr>

                                        <c:forEach items="${Music.list}" var="music" varStatus="s">
                                            <tr>
                                                <td>${music.id}</td>
                                                <td>${music.name}</td>
                                                <td>${music.introduction}</td>
                                                <td><a class="btn btn-default btn-sm"
                                                       href="${pageContext.request.contextPath}/music?method=userById&id=${consumer.id}">播放</a>&nbsp;
                                                    <a class="btn btn-default btn-sm"
                                                       href="${pageContext.request.contextPath}/music?method=userById&id=${consumer.id}">修改</a>&nbsp;
                                                    <a class="btn btn-default btn-sm"
                                                       href="${pageContext.request.contextPath}/music?method=deleteMusic&currentPage=1&id=${music.id}">删除</a>
                                                </td>
                                            </tr>
                                        </c:forEach>


                                    </table>
                                    <div>
                                        <nav aria-label="Page navigation">
                                            <ul class="pagination">
                                                <li>
                                                    <a href="${pageContext.request.contextPath}/music?method=showAllMusic&currentPage=${Music.currentPage-1}"
                                                       aria-label="Previous">
                                                        <span aria-hidden="true">&laquo;</span>
                                                    </a>
                                                </li>
                                                <c:forEach begin="1" end="${Music.totalPage}" var="i">
                                                    <c:if test="${Music.currentPage==i}">
                                                        <li class="active">
                                                            <a href="${pageContext.request.contextPath}/music?method=showAllMusic&currentPage=${i}">${i}</a>
                                                        </li>
                                                    </c:if>
                                                    <c:if test="${Music.currentPage!=i}">
                                                        <li>
                                                            <a href="${pageContext.request.contextPath}/music?method=showAllMusic&currentPage=${i}">${i}</a>
                                                        </li>
                                                    </c:if>
                                                </c:forEach>
                                                <li>
                                                    <a href="${pageContext.request.contextPath}/music?method=showAllMusic&currentPage=${Music.currentPage+1}"
                                                       aria-label="Next">
                                                        <span aria-hidden="true">&raquo;</span>
                                                    </a>
                                                </li>
                                                <span style="font-size: 25px;margin-left: 5px;">共${Music.totalCount}条记录，共${Music.totalPage}页</span>
                                            </ul>
                                        </nav>
                                    </div>
                                </div>

                                <div style="display: none;" class="km_m_content_con" id="km_m_updown_con">
                                    <h3 style="text-align: center">添加新曲</h3>
                                    <div class="container body-content" >
                                        <br>
                                        <div class="form-horizontal">
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label">歌曲名</label>
                                                <div class="col-sm-10">
                                                    <input class="form-control" id="muName" name="muName" type="text" style="width: 200px">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label">文件</label>
                                                <input id="FileUpload" name="FileUpload" type="file" style="display:none">
                                                <input id="FileUpload2" name="FileUpload2" type="file" style="display:none">
                                                <div class="col-sm-10">
                                                    <input id="photoCover" class="input-large" type="text" style="height:30px;width: 200px;">
                                                    <div class="btn btn-primary btn-sm" onclick="$('input[id=FileUpload]').click();">选择音乐</div><br/>
                                                    <input id="photoCover2" class="input-large" type="text" style="height:30px;width: 200px;">
                                                    <div class="btn btn-primary btn-sm" onclick="$('input[id=FileUpload2]').click();">选择封面</div>
                                            </div>
                                                <div class="form-group">
                                                    <label class="col-sm-2 control-label">歌词</label><br>
                                                    <div class="col-sm-10">
                                                        <textarea class="form-control" id="muGeci" name="muGeci" rows="5" style="width: 500px"></textarea>
                                                    </div>
                                                </div>
                                            <div class="form-group">
                                                <div class="col-sm-offset-2 col-sm-10">
                                                    <input class="btn btn-default" id="btnSave" type="button" value="上传文件">
                                                </div>
                                            </div>
                                            <div class="form-group"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>